<template>
	<view>
		<fui-form ref="form">
			<fui-form-item label="身高" highlight arrow arrowColor="#CCC" labelSize="26" @click="showShengao">
				<view style="float:right">{{ shengao }}cm</view>
			</fui-form-item>
			<fui-form-item label="体重" highlight arrow arrowColor="#CCC" labelSize="26" @click="showTizhong">
				<view style="float:right">{{ tizhong }}kg</view>
			</fui-form-item>
			<fui-form-item label="三围" highlight arrow arrowColor="#CCC" labelSize="26" @click="showSanwei">
				<view style="float:right">胸围{{ sanwei[0] }}腰围{{ sanwei[1] }}臀围{{ sanwei[2] }}</view>
			</fui-form-item>
			<fui-form-item label="罩杯" highlight arrow arrowColor="#CCC" labelSize="26" @click="showZhaobei"
				v-if="userInfo.UserSex && JSON.parse(userInfo.UserSex).value == 0">
				<view style="float:right">{{ zhaobei }}</view>
			</fui-form-item>
			<fui-form-item label="鞋码" highlight arrow arrowColor="#CCC" labelSize="26" @click="showJiaoma">
				<view style="float:right">{{ jiaoma }}</view>
			</fui-form-item>

			<button class="sub-btn" @click="saveBaseInfo">保存</button>
		</fui-form>
		<fui-picker :options="shengaos" :value="shengao" :show="showShengaos" @change="changeShengao"
			@cancel="cancelShengaos"></fui-picker>
		<fui-picker :options="tizhongs" :value="tizhong" :show="showTizhongs" @change="changeTizhong"
			@cancel="cancelTizhongs"></fui-picker>
		<fui-picker :layer="3" :options="sanweis" :value="sanwei" :show="showSanweis" @change="changeSanwei"
			@cancel="cancelSanweis"></fui-picker>
		<fui-picker :options="jiaomas" :value="jiaoma" :show="showJiaomas" @change="changeJiaoma"
			@cancel="cancelJiaomas"></fui-picker>
		<fui-picker :options="zhaobeis" :value="zhaobei" :show="showZhaobeis" @change="changeZhaobei"
			@cancel="cancelZhaobei"></fui-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shengaos: [],
				tizhongs: [],
				sanweis: [],
				jiaomas: [],
				zhaobeis: [],
				showShengaos: false,
				showTizhongs: false,
				showSanweis: false,
				showJiaomas: false,
				showZhaobeis: false,
				shengao: 175,
				tizhong: 60,
				sanwei: [80, 80, 80],
				zhaobei: 'E',
				jiaoma: 39,
				userInfo: {}
			};
		},
		onLoad() {
			for (let i = 40; i < 221; i++) {
				this.shengaos.push(i);
			}
			for (let i = 30; i < 301; i++) {
				this.tizhongs.push(i);
			}

			let sanwei = [];
			for (let i = 40; i < 121; i++) {
				sanwei.push(i);
			}

			let xiongwei = ['A', 'B', 'C', 'D', 'E', 'F'];
			this.zhaobeis.push(xiongwei)
			// this.sanweis.push(xiongwei)
			this.sanweis.push(sanwei)
			this.sanweis.push(sanwei)
			this.sanweis.push(sanwei)

			// console.log(this.sanweis)

			for (let i = 20; i < 49; i++) {
				this.jiaomas.push(i);
			}
			this.getBaseInfo();
		},
		methods: {
			getBaseInfo() {
				this.$httpost('/UserAction/getUserInfo', {}).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data.UserInfo;
						if (JSON.parse(res.data.UserInfo.UserBaseinfo) != null) {
							this.shengao = JSON.parse(res.data.UserInfo.UserBaseinfo).shengao
							this.tizhong = JSON.parse(res.data.UserInfo.UserBaseinfo).tizhong
							this.sanwei = JSON.parse(res.data.UserInfo.UserBaseinfo).sanwei
							this.jiaoma = JSON.parse(res.data.UserInfo.UserBaseinfo).jiaoma
							this.zhaobei = JSON.parse(res.data.UserInfo.UserBaseinfo).zhaobei
						}
					}
				});
			},
			showShengao() {
				this.showShengaos = true
			},
			changeShengao(e) {
				// console.log(e)
				this.shengao = e.result
				this.showShengaos = false
			},
			cancelShengaos() {
				this.showShengaos = false
			},
			showTizhong() {
				this.showTizhongs = true
			},
			changeTizhong(e) {
				// console.log(e)
				this.tizhong = e.result
				this.showTizhongs = false
			},
			cancelTizhongs() {
				this.showTizhongs = false
			},
			showSanwei() {
				this.showSanweis = true
			},
			showZhaobei() {
				this.showZhaobeis = true
			},
			changeZhaobei(e) {
				this.zhaobei = e.value;
				this.showZhaobeis = false;
				// console.log('changeZhaobei', e)
			},
			cancelZhaobei(e) {
				this.showZhaobeis = false;
				// console.log('cancelZhaobei', e)
			},
			changeSanwei(e) {
				// console.log(e)
				this.sanwei = e.value
				this.showSanweis = false
			},
			cancelSanweis() {
				this.showSanweis = false
			},
			showJiaoma() {
				this.showJiaomas = true
			},
			changeJiaoma(e) {
				// console.log(e)
				this.jiaoma = e.result
				this.showJiaomas = false
			},
			cancelJiaomas() {
				this.showJiaomas = false
			},
			saveBaseInfo() {
				// console.log(this.zhaobei, '----------------')
				this.$httpost('/UserAction/saveMyBaseInfo', {
					shengao: this.shengao,
					tizhong: this.tizhong,
					sanwei: this.sanwei,
					zhaobei: this.zhaobei,
					jiaoma: this.jiaoma
				}).then(res => {
					if (res.code == 200) {
						this.$common.goNavPage('/myPages/pages/mypage?artisterID=' + res.data.UserID)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .submitBtn {
	// 	background-color: $globalColor;
	// 	color:#000;
	// 	font-size: 28rpx;
	// 	border:0rpx solid $globalColor;
	// 	width:80vw;
	// 	height: 80rpx;
	// 	line-height: 80rpx;
	// 	margin:auto;
	// 	margin-top: 40rpx;
	// 	&::after {
	// 		border: none;
	// 	}
	// }
</style>